@charset "utf-8";

@import "common/reset";

@function n($px){
    @return($px)/2;
}
$color:#b20000;

.web{
     .popup{
        padding-top: 3%;
        text-align: center;
        width:0%;
        height: 0%;
        background: #222222;
        position: absolute;
        top: -100%;
        left: -100%;
        transition: all .6s ease-in-out;
        .icon_cha{
            float: left; 
            margin-left: 5%;
            background: $color;
            font-size: n(26px);
            color: #fff;
            width: n(50px);
            height:n(50px);
            text-align: center;
            line-height:n(50px) ;
            border-radius: n(25px);
            margin-right: 3%; 
            display: inline-block;
        }
        .search{
            float: right;
            margin-right: 5%;
            margin-bottom: n(15px);
            position: relative;
            border: 1px solid #dcdee0;
            border-radius: n(24px);   
            box-sizing: border-box;
            display: inline-block;
            width: 78%; 
            .search_text{
                width: 100%;
                height: 25px;
                border: none;
                padding-left: n(62px);
                padding-right: 5%;
                border-radius: n(50px);
                background: #1f1f1f;
                color: #fff;
            }
            .icon-fangdajing{
                color: #fff;
               
                position: absolute;
                vertical-align: middle;
                left: n(6px);
                top: n(6px);
            }
        }
       
        img{
            width:n(161px) ;
            height: n(136px);
        }
        .ju{
            margin-top: n(42px);
        }
        .input{
            line-height: n(58px);
            margin-bottom: n(15px);
            font-size: 0;
            width: 100%; 
            
            img{
                width: n(27px);
                height: n(32px);
                vertical-align: middle;
            }
            .tubiao{
                display: inline-block;
                width:n(62px);
                height: n(58px);
                line-height: n(58px);
                text-align: center;
                background: #303030;
            }
            .popup_input{
                display: inline-block;
                height: n(58px);
                margin: auto;
               
                input{            
                    font-size: n(20px);       
                    display: inline-block;
                    width: n(434px);
                    height: n(58px);
                    background: #3d3d3d;
                    border: none;
                    padding-left: n(38px);
                    padding-right: 10px;
                    color: #a9a9a9;
                    vertical-align: middle;
                }
            }
        }
        .forget{
            width: n(496px);
            margin: auto;
            text-align: right;
            font-size: n(20px);
            a{
                text-decoration: none;
                color: #fff;
            }
            img{
                height: n(19px);
                width: n(19px);
                vertical-align: middle;
            }
        }
        .log{
            background:$color;
            margin:6% auto 2% auto;
            margin-bottom: n(15px);
        }
        .enroll{
            margin:0 auto 2% auto;
            border: 1px solid $color;
        }
        .log,.enroll{            
            font-size: n(23px);
            width: n(496px);
            height: n(56px);
            line-height: n(56px);
            text-align: center;
            color: #cdcdcd;
        }
    }
    #login_control:checked~.login{
        transform: translate(100%,100%);
        width: 100%;
        height: 100%;
    }
    #person_control:checked~.preson{
        transform: translate(100%,100%);
        width: 100%;
        height: 100%;
    }
    #search_web_control:checked~.search_web{
         transform: translate(100%,100%);
         width: 100%;
         height: 100%;
    }
    #serch_res_control:checked~.search_res{
        transform: translate(100%,100%);
        width: 100%;
        height: 100%;
    }
    .login{
        padding-top: 24%;
    }
    .preson{
        
        height: 100%;       
        .person_line{
            border-top: 1px solid #454545;
            margin: n(14px) auto n(32px) auto;
            width: 90%;
        }
        .touxiang{
            position: relative;
            height:n(130px);
            width: n(130px);
            border-radius: 50%;
            margin: auto;
            background: url(../img/touxiang.jpg) no-repeat center/100%;
            .preson_number{
                position: absolute;
                height: n(33px);
                width: n(33px);
                border-radius: 50%;
                background:#ff0000 ;
                color: #fff;
                font-size: n(27px);
                top: 0;
                right: n(-8px);
            }
        }
        .person_name{
            color: #fff;
            .font_name{
                font-size: n(25px);
            }
            .personal{
                width: n(91px);
                height: n(20px);
                border: 1px solid #fff;
                text-align: center;
                line-height: n(20px);
                font-size: n(14px);
                padding-left: 4px;
                padding-right: 4px;
            }
        }
        .xingxing{
            .icon-xing2{
                color: #eeca02;
                font-size: n(24px);
                padding-right:n(12px) ;
            }
        }
        .fans{ 
            font-size: n(23px);

            .span_w{
                color: #fff;
            }
            .span_r{
                color: #8b090d;
            }
        }
        .person_btn{           
            padding-top: n(20px);
            input{
                color: #fff;
                width: n(220px);
                height: n(52px);
                border-radius: n(26px);
            }
            #issue{
                background: #cdcdcd;
                margin-right: n(20px);
            }
            #collect{
                background: #b60005;
            } 
        }
        .between{
            background:#2d2d2d ;
            width: 100%;
            height:n(25px);
            margin-top: n(20px);
            margin-bottom: n(50px);
        }
        .preson_around{
            padding-bottom: 25px;
            margin: auto;
            color: #7d7d7d;
            width: 91%;
            font-size: n(23px);
            .preson_left{
                float: left;
                display: inline-block;
            }
            .preson_right{
                display: inline-block;
                float: right;               
                transform: rotate(90deg);
            }           
        }
        .person_linetwo{
                clear: both;
                width: 92%;
                margin-bottom: n(28px);
                border-top: 1px solid #323232;
                margin: n(18px) auto;
        }
        .person_linethree{
            clear: both;
            width: 75%;
            margin-bottom: n(28px);
            border-top: 1px solid #323232;
            margin: n(28px) auto n(31px) auto;
        }            
        p{
            color: #fff;
            font-size: n(21px);
        }
        .padding_top{
            padding-top: n(38px);
        }
        .preson_aroundtwo{
            color: #646464;
            .preson_right{
                display: inline-block;
                float: right;               
                transform: rotate(0);
            }  
        }
        .person_exit{
            margin: auto;
            font-size: n(23px);
            letter-spacing: n(8px);
            height: n(52px);
            width: n(180px);
            border-radius: n(26px);
            color:#fff;
            background:#b60005;
            text-align: center;
            line-height: n(52px);
        }    
        
    }
    .search_web{             

        .search_content{
            background: #f1f1f1;        
            height: 100%;
            width: 100%;
            p{
                color: #211d1d;
                font-size: n(27px);
                float: left;
                padding-left: 5%;
                padding-top: 5%;
                padding-bottom: 3%;
            }
            .search_result{
                width: 100%;
                text-align: left;
                padding-left: 5%;
                padding-right: 5%;
                span{
                    display: inline-block;
                    font-size: n(29px);
                    background: #fff;
                    color: #979797;
                    padding:n(13px) n(16px);
                    margin-right: n(10px);
                    margin-bottom: n(10px);
                }               
            } 
        }
    }
    .search_res{
        .search_res_result{
            background: #f1f1f1;        
            height: 100%;
            width: 100%;
            .result_neirong{
                background: #fff;
                width: 96%;
                margin:auto;
                margin-top: n(16px);
                .result_title{
                    font-size: n(27px);
                    color: #595757;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding: 2% 3% 3% 2% ;
                    .title_r{
                        color: #b60005;
                    }                   
                }
                .result_content{
                    text-align: left;
                    line-height: n(36px);
                    font-size: n(22px);
                    color: #898989;
                    padding-left: 2%;
                    padding-right: 3%;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                    -webkit-line-clamp: 3; /** 显示的行数 **/
                    overflow: hidden;  /** 隐藏超出的内容 **/
                }
                .result_ps{
                    color: #898989;
                    font-size: n(18px);
                    padding: 2% 0 2% 2%;
                    text-align: left;
                    .search_text_person{
                        padding-right: 5%;
                    }
                }
            }
        }
    }
    .gimc_popup{
        position: absolute;
        text-align: center;
        width:0%;
        left: 100%;
        transition: all 1s ease-in-out;
    }
        #gimc_control:checked~.tearm{
         transform: translate(100%,100%);
         left: 0%;
    }
}
